<div class="box">

  <div id="popUpItem" onclick="closeItem()" style="top: 20%; z-index: 11; position:fixed;" ></div>
  <div id="darkBack" onclick="closeBack()" style="top: 0px; left: 0px; width: 100%; background-color: rgb(0, 0, 0); position: fixed; z-index: 10;" ></div>

  <div class="title">
    <h5>Effective Call</h5>
  </div>
  <!-- end box / title -->




  <?php
  $msg = $this->session->flashdata('message');
  if($msg <> ""){
    echo'<div id="box-messages">
    <div class="messages">
    <div id="message-success" class="message message-success">
    <div class="image">
    <img src="'. base_url() .'file/shell/smooth/resources/images/icons/success.png" alt="Success" height="32" />
    </div>
    <div class="text">
    <h6>'. $msg .'</h6>
    </div>
    <div class="dismiss">
    <a href="#message-success"></a>
    </div>
    </div>
    </div>
    </div>';
  }
  ?>       
  <div >
    <table id="records">
      <tr>
        <td >Merchandiser</td>

        <td align="left" ><select name="sales_name" id="sales-name">
          <!--<option value=""></option>-->
          <?php 
          foreach ($sales as $key) {
            echo '<option value="'.$key->user_id.';'.$key->user_group_id.'">'.$key->user_id.' | '.$key->user_name.' | '.$key->user_group_caption.'</option>';
          }
          ?>
        </select>
      </td>

      
    </tr>
    <tr>
      <td> Tanggal Kunjungan</td>
      <td>
        <input  type="text" readonly="readonly" class="datepicker" id="datepicker" value="<?php echo date('Y-m-j'); ?>" />
        <img style="display : none" id="ajaxLoad" src="<?php echo base_url()?>file/smooth/images/ajax-loader2.gif" />
        <!--<button id="search" >cari</button>--></td>
      </tr></table>
    </div>
    <div class="data_table_mang">

      <ul>
        <!-- <li><a id="outletVisits" href="#tabs-5">Outlet Visit</a></li> -->
        <li><a id="outlet" href="#tabs-2">Outlets</a></li>
        <li><a id="POSM" href="#tabs-3">POSM</a></li>
        <li><a id="etalase" href="#tabs-4">Etalase</a></li>
      </ul>
    <!--   <div id="tabs-5">

        <div class="table">
          <base href="<?php echo base_url() ?>" />

          <table id="records" class="showOutlet">
            <thead>

              <tr>
                <th> NO</th>
                <th> Outlet ID</th>
                <th> Nama Outlet </th>
                <th> Keywords</th>
                <th> Gambar</th>
                <th> Check IN</th>
                <th> Check OUT</th>
              </tr>
            </thead>
            <tbody class="routletVisits"> </tbody>
            <tfoot id="trLoad_outletVisits" style="display:none">
            <tr >
              <td colspan="7">
                <a id="loadmore" class="loadmore" style="display:block; text-align:center; ">Load More Outlets</a>
              </td>
            </tr>
          </tfoot> 
          </table>

        </div>
      </div>
 -->
      <div id="tabs-2">

        <div class="table_2">
          <base href="<?php echo base_url() ?>" />

          <table id="records" class="show_full">
            <thead>

              <tr>
                <th> NO</th>
                <th> Outlet ID</th>
                <th> Outlet</th>
                <th> Gambar</th>
                <th> Remark</th>
               
              </tr>
            </thead>
            <tbody class="routlet"> </tbody>

            <tfoot id="trLoad_outlet" style="display:none">
            <tr >
              <td colspan="7">
                <a id="loadmore" class="loadmore" style="display:block; text-align:center; ">Load More Outlets</a>
              </td>
            </tr>
          </tfoot> 
          </table>

        </div>
      </div>
      <div id="tabs-3">

        <div class="table_3">
          <base href="<?php echo base_url() ?>" />

          <table id="records" class="showPOSM">
            <thead>

              <tr>
                <th> NO</th>
                <th> Outlet ID</th>
                <th> Outlet</th>
                
                <th> Gambar</th>
                <th> Remark</th>
              </tr>
            </thead>
            <tbody class="rPOSM"> </tbody>
            <tfoot id="trLoad_POSM" style="display:none">
            <tr >
              <td colspan="7">
                <a id="loadmore" class="loadmore" style="display:block; text-align:center; ">Load More Outlets</a>
              </td>
            </tr>
          </tfoot> 
          </table>

        </div>
      </div>
      <div id="tabs-4">

        <div class="table_4">
          <base href="<?php echo base_url() ?>" />

          <table id="records" class="showEtalase">
            <thead>

              <tr>
                <th> NO</th>
                <th> Outlet ID</th>
                <th> Outlet</th>
                <th> Gambar</th>
                <th> Remark</th>
                
              </tr>
            </thead>
            <tbody  class="retalase "> </tbody>
            <tfoot id="trLoad_etalase" style="display:none">
            <tr >
              <td colspan="7">
                <a id="loadmore" class="loadmore" style="display:block; text-align:center; ">Load More Outlets</a>
              </td>
            </tr>
          </tfoot> 
          </table>

        </div>
      </div>

      <?php
                //echo $userGroupId['user_group_id'];
                //if($userGroupId['user_group_id'] == 4 || $userGroupId['user_group_id'] == 5){
                        // $this->load->view('grid-merchandising-outlet');
                //}else{
                       // $this->load->view('grid-merchandising-view2');//echo'<iframe src="'.base_url().'index.php/territory/territory_iframe/chart" width=100% height=600px>';
                //}
      ?>      
    </div>

  </div>

  <script type="text/javascript">
  $(document).ready(function() {
    $( ".data_table_mang" ).tabs();

    $('.loadmore').click(function(){
       var id = $(this).parents('tfoot').attr('id').split('_');
       var row = $('tbody.r'+id[1]).children().length;
       search(id[1], row);
       return false;
      });


  $('#outletVisits').click(function(e)
  {
    var id = $(this).attr('id');
    var row = 0;
    $('#ajaxLoad').fadeIn('slow');
    $('.r'+id).empty();
    search(id, row);
    $('#ajaxLoad').fadeOut('slow');
    
});

  $('#outlet').click(function(){
    var id = $(this).attr('id');
    var row = 0;
    var type = 1;
    $(this).attr("disabled","disabled");
     $('#ajaxLoad').fadeIn('slow');
    $('.r'+id).empty();
    search(id, row, type);
    $('#ajaxLoad').fadeOut('slow');

  });

  $('#POSM').click(function(){
    var id = $(this).attr('id');
    var row = 0;
    var type = 3;
   $('#ajaxLoad').fadeIn('slow');
    $('.r'+id).empty();
    search(id, row, type);
    $('#ajaxLoad').fadeOut('slow');
  });

  $('#etalase').click(function(){
    var id = $(this).attr('id');
     var row = 0; 
     var type = 2;
    $('#ajaxLoad').fadeIn('slow');
    $('.r'+id).empty();
    search(id, row, type);
    $('#ajaxLoad').fadeOut('slow');
  });

  });

  function search(id , row, type){

   // alert(id);
   var row = row;
   var no =row + 1;
   var sales_id = $('#sales-name').val().split(';');
 

      $.post("index.php/merchandiser/search_", {
      merchan_id: sales_id[0],
      date: $('#datepicker').val(),
      row : row,
      id:id, type:type
    },

    function(data){
      // $(".rOutlets").empty();
      if (data.length >= 1){
        $.each(data, function(){
          $('<tr><td>'+no++ +'</td><td>'
            +this.partner_id+'</td><td><a class="address" title="' + this.address +'" </a> '
            +this.outlet_name +'</td><td><a id="'+ this.img+'" onclick="popUp(this.id)" target="_blank">\
            <img style="width:50px" src='
            + this.img +' /></a></td><td>'
            + this.img_remark +'</td></tr>').appendTo(".r"+id);

        });
        $('#trLoad_'+id).show();
        if (data.length <10   ){
              $('#trLoad_'+id).hide();
            }
      }
      else {
        $('<tr><td colspan="7"> Data Outlet tanggal '+$('#datepicker').val()+' Tidak Ada</td></tr>').appendTo(".r"+id);
        $('#trLoad_'+id).hide();
      }
    // }
  }, "json");
    return false;
    // }

  }



  $( "#datepicker" ).datepicker({
    showOn: "button", maxDate: "0",
    showWeek: true, dateFormat: 'yy-mm-d',
    buttonImage: "<?php echo base_url('file/images/table.png'); ?>",
    buttonImageOnly: true,
    onSelect: function(){
    var id = 'outlet';
    var row = 0;
    var type = 1;
     $('#ajaxLoad').fadeIn('slow');
    $('.r'+id).empty();
    search(id, row, type);
    $('#ajaxLoad').fadeOut('slow');
    }
  });

  function popUp(urlImg)
  {
    var wrapperHeight = $('#content').height();
    $('#darkBack').css({'height': ($(document).height())+'px'});
    var urlBase = '<?php echo base_url()?>';
    $("#darkBack").css({"opacity" : "0.7"})
    .fadeIn("slow");
    
    $("#popUpItem").css({"opacity" : "1"})
    .fadeIn("slow");    

    //$("#popUpItem").html("<img src='"+urlBase+"file/uploads/"+urlImg+"' width='400px'/>")
    $("#popUpItem").html("<img src='"+urlBase+urlImg+"' width='400px'/>")
    .center()
    .fadeIn("slow");
    //alert(wrapperHeight);
  }
  function closeBack()
  {
    $("#darkBack").fadeOut("slow");
    $("#popUpItem").fadeOut("slow");
  }

  function closeItem()
  {
    $("#darkBack").fadeOut("slow");
    $("#popUpItem").fadeOut("slow");
  }


  $(document).keypress(function(e){
    if(e.keyCode==27){
      $("#darkBack").fadeOut("slow"); 
      $("#popUpItem").fadeOut("slow");   
    }
  });

  jQuery.fn.center = function () {
        // this.css("position","absolute");
        // this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
        return this;
      }
      </script>